<template>
  <div class="HelloWorld">
    <div class="canvaspanel">
      <div class="canvasborder">
        <vue-esign ref="esign" :width="530" :height="1080" :is-crop="isCrop" :line-width="lineWidth" :line-color="lineColor" :bg-color.sync="bgColor" />
      </div>
      <div class="buttongroup">
        <div class="empty" @click="handleReset">清空</div>
        <div class="autograph" @click="handleGenerate">确定</div>
      </div>
    </div>
  </div>
</template>

<script>

import { signBoardSend } from '@/api/signIn';
import { dataURLtoFile } from '@/assets/dataURLtoFile.js';
import axios from 'axios';
export default {
  name: 'HelloWorld',
  data() {
    return {
      lineWidth: 6,
      lineColor: 'red',
      bgColor: '',
      resultImg: '',
      isCrop: false,
      userId: '', // 用户id
      code: '', // 随机字符串
      path: '', // 路径
      patientId: '', // 患者id
      attribute: '' // 签字属性  1:医嘱 2:患者 3:会诊医生
    };
  },
  mounted() {
    let code = this.$route.query.code.split('|');
    this.userId = code[0];
    this.code = code[3];
    this.patientId = code[1];
    this.attribute = code[2];
  },
  methods: {
    handleReset() {
      this.$refs.esign.reset();
    },
    // 生成base64格式
    handleGenerate() {
      this.$refs.esign.generate().then(res => {
        let file = dataURLtoFile(res, '签名');
        this.onchangemd(file);
      }).catch(() => {
        this.$message({
          message: '请先签字后再提交！！！',
          type: 'warning'
        });
      });
    },
    onchangemd(fileData) {
      let that = this;
      let formData = new FormData();
      let fileOfBlob = new File([fileData], new Date() + '.jpg'); // 命名图片名
      formData.append('file', fileOfBlob);
      // axios.post(process.env.VUE_APP_BASE_API + '/files/imgUpload', formData, {
      axios.post(window.server.SERVER_API[0].api + '/files/fileUpload', formData, {
        // 因为我们上传了图片,因此需要单独执行请求头的Content-Type
        headers: {
          // 表示上传的是文件,而不是普通的表单数据
          'Content-Type': 'multipart/form-data',
          // 'Authentication': getToken('auth_key') ? getToken('auth_key') : '',
          // 'userId': getToken('session_id') ? getToken('session_id') : '',
          'clientType': 0
        }
      }).then(function(res) {
        console.log(res.data.data);
        that.path = res.data.data;
        that.send();
        // this.$router.go(-1);
      });
    },
    // 通过密码获取签字
    async send() {
      // this.cipherForm.signPasswd
      const res = await signBoardSend({
        attribute: this.attribute,
        code: this.code,
        path: this.path,
        patientId: this.patientId,
        userId: this.userId
      });
      console.log(res);
      // this.$router.go(-1);
      if (window.WeixinJSBridge) {
        setTimeout(function() {
          // 这个可以关闭安卓系统的手机
          document.addEventListener(
              'WeixinJSBridgeReady',
              function() {
                window.WeixinJSBridge.call('closeWindow');
              },
            false
          );
            // 这个可以关闭ios系统的手机
          window.WeixinJSBridge.call('closeWindow');
          }, 20);
      } else {
        // this.$router.go(-1);
        window.close();
      }
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.canvasborder{
    border: solid 1px #ccc;
}
@media screen and (orientation: portrait) { /* 竖屏 */
    .canvaspanel canvas{
        width: 100% !important;
        height: 100% !important;
    }
    .buttongroup{
        left: -50px;
        position: absolute;
        bottom: 100px;
        transform: rotate(90deg);
    }
    .van-toast--fail{
        transform: rotate(90deg);
    }
    .empty,.autograph{
        width: 100px;
        height: 40px;
        line-height: 40px;
        font-size: 1rem;
        float: left;
        color: white;
        text-align: center;
    }
    .autograph{
      background: rgba(191, 63, 63, 0.9);
    }
    .empty{
        background: #ccc;
    }
}
@media screen and (orientation: landscape) {    /* 横屏 */
    .buttongroup{
        right: 30px;
        position: absolute;
        bottom: 20px;
        transform: rotate(0deg);
    }
    .empty,.autograph{
        width: 100px;
        height: 40px;
        line-height: 40px;
        font-size: 1rem;
        float: left;
        color: white;
        text-align: center;
    }
    .autograph{
      background: rgba(191, 63, 63, 0.9);
    }
    .empty{
        background: #ccc;
    }
}
</style>
